import React from 'react'
import { Row, Col, Button } from 'antd'
import styles from './interfaceInfo.scss'
import '@/common/skin.css'

const InterfaceInfo = (props) => {
  const { data:{ account, password, receiveUrl }, isPassWordShow, onResetPassWord, onInterfaceDoc, onConnectUs, onPassWordShow, onPassWordHidden } = props

  return (
    <Row style={{paddingTop: 8, paddingLeft: 8, paddingRight: 8}}>
      <Row className={styles["title-container"]} >
        <div className={styles["header"]} >
          <div className={styles["header-title"]}>
            接口信息
          </div>
          {/* <Button className={styles["change-pwd-button"]} onClick={onResetPassWord} icon="edit" type="primary">重置密码</Button> */}
        </div>
      </Row>
      <Row  style={{padding: 24,backgroundColor: '#fff'}}>
        <Col span={18}>
          <div className={styles["info"]}>账号：{account}</div>
          <div className={styles["info"]}>密码：
            {isPassWordShow ? password : '**********'}
            {
              isPassWordShow ? 
              <img className={styles['eye-img']} src={require("../../assets/images/eye-on.png")} onClick={onPassWordHidden} /> :
              <img className={styles['eye-img']} src={require("../../assets/images/eye-off.png")} onClick={onPassWordShow} /> 
            } 
          </div>
          <div className={styles["info"]}>地址：{receiveUrl}</div>
        </Col>
        <Col span={3} style={{lineHeight: '120px'}}>
          <Button type="primary" onClick={onInterfaceDoc} size="large" className="skin-square-button" >接口文档</Button>
        </Col>
        <Col span={3} style={{lineHeight: '120px'}}>
          <Button type="primary" onClick={onConnectUs} size="large" className="skin-square-button" >联系我们</Button>
        </Col>
      </Row>
    </Row>
  )
}

export default InterfaceInfo